<template>
	<view>
		<view @click="show">
			<slot></slot>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="picker-header">
				<view class="action-cancel" @click="hide">取消</view>
				<view class="action-title" @click="confirm">{{title}}</view>
				<view class="action-confirm" @click="confirm">确定</view>
			</view>
			<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="selectValue" @change="bindChange">
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in times" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</uni-popup>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		props:{
			value: String,
			title: {
				type: String,
				default: ""
			},
			dayNum: {
				type: Number,
				default: 5
			},
			selTimes: {
				type: Array,
				default: null
			},
		},
		data() {
			const date = new Date()
			let days = []

			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			for (let i=0; i<this.dayNum; i++) {
				let monthStr = month+"";
				if (monthStr.length===1){
					monthStr = "0"+monthStr
				}
				let dayStr = day+"";
				if (dayStr.length===1){
					dayStr = "0"+dayStr
				}
				if (i===0) {
					dayStr += "(今天)"
				} else if (i===1) {
					dayStr += "(明天)"
				} else if (i===2) {
					dayStr += "(后天)"
				}
				days.push(year + "-" + monthStr + "-" + dayStr)

				day++;

				let monthDays = this.getCountDays(year + "-" + month)
				if (day >= monthDays) {
					day = 1
					month++;
					if (month>=12) {
						month = 1

						year++
					}
				}
			}

			console.warn("days: ", days)
			return {
				selModel: this.mode,
				selectValue: [0,0],
				days,
				day,
				times: this.selTimes || ["10:00 ~ 12:00", "14:00 ~ 16:00", "16:00 ~ 18:00", "18:00 ~ 20:00", "20:00 ~ 22:00"],
				// value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
			}
		},
		methods: {
			getFirstTime(){
				this.calTimes()

				return this.days[0].split("(")[0] + ' ' + this.times[0]
			},
			show(){
				console.log("showPopup")

				this.calTimes()

				this.$refs.popup.open()
			},
			hide(){
				this.$refs.popup.close()
			},
			calTimes() {
				if (this.timeTemps) {
					this.times = this.timeTemps;
				}
				let toDay = moment().format("YYYY-MM-DD")
				let selDay = this.days[this.selectValue[0]].split("(")[0]
				if (toDay == selDay) {
					const date = new Date()
					let hours = date.getHours();
					let timeTemps = [];
					for (let item of this.times) {
						let minTime = item.split(":")[0];
						if (minTime > hours) {
							timeTemps.push(item);
						}
					}

					if (timeTemps.length <= 0) {
						this.days.splice(0, 1);
					} else {
						this.timeTemps = this.times;
						this.times = timeTemps
					}
				}
			},
			getCountDays(ym) {
				let curDate = new Date(ym);
				/* 获取当前月份 */
				let curMonth = curDate.getMonth();
				/* 生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
				curDate.setMonth(curMonth + 1);
				/* 将日期设置为0 */
				curDate.setDate(0);
				/* 返回当月的天数 */
				return curDate.getDate();
			},
			bindChange(e){
				this.selectValue = e.detail.value

				this.calTimes()
			},
			confirm(){
				this.hide()

				let day = this.days[this.selectValue[0]]
				let time = this.times[this.selectValue[1]]

				day = day.split("(")[0]
				time = time.replace(/ /g, "")
				this.$emit('change', day + " " + time)
			}
		}
	}
</script>

<style lang="scss" scoped>
.picker-header{
	padding: 0rpx 20rpx;
	display: flex;
	text-align: center;
	flex-direction: row;
	height: 90rpx;
	background-color: #fff;
	align-items: center;
	.action-title {
		display: flex;
		flex: 1;
		text-align: center;
		justify-content: center;
	}
	.action-cancel {
	    color: #888;
		font-size: 34rpx;
		width: 100rpx;
	}
	.action-confirm{
		color: #007aff;
		font-size: 34rpx;
		width: 100rpx;
	}
}
.picker-view{
	position: relative;
	display: block;
	width: 100%;
	height: 476rpx;
	background-color: #fff;
	padding-left: 40rpx;
	.item{
		display: flex;
		align-items: center;
		// justify-content: center;
	}
}
</style>
